<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';


let blog=ref({
  id:0,
  title:"",
  author:"",
  conternt:"",
})

onMounted(async ()=>{

  let res=await axios.get("http://localhost:3000/blogs")
  blogs.value=res.data.data
  
})





let blogs=ref([])
let isSeen=ref(false)
let keyword=ref("")

function butSave(){
  console.log("保存");
  isSeen.value=false
  if(blog.value.id>0){
    let tempArr=blogs.value.filter(item=>item.id===blog.value.id)
    if(tempArr.length>0){
     let tempObj=tempArr[0]

      tempObj.title=blog.value.title
      tempObj.author=blog.value.author
      tempObj.conternt=blog.value.conternt
    }


  }else{
    let ids=blogs.value.map(item=>item.id)

  let maxId=Math.max(...ids)
  blog.value.id=maxId+1
  blogs.value.push(blog.value); // 将新条目添加到数组开头
  // 重置 blog 对象
  }

}

function butCancel(){
  console.log("取消");
  isSeen.value=false
  
}

function butAdd(){
  console.log("新增");
  isSeen.value=true
  blog.value = { }; 
 
  
}

async function  butFind(id){
  console.log("查找");
  let data=await axios.get(`http://localhost:3000/blogs?keyword=${keyword.value}`)
  blogs.value=data.data.data

  
  
}

function butEdit(id){
  console.log("编辑");
  let tempArr=blogs.value.filter(item=>item.id===id)
  if(tempArr.length>0){
    let tempObj=tempArr[0]
    blog.value={
      id :tempObj.id,
      title :tempObj.title,
      author :tempObj.author,
      conternt :tempObj.conternt
    }
  }


  isSeen.value=true
  
}

async function butDel(id){
  console.log("删除");

  let res = await axios.delete(`http://localhost:3000/blogs/${id}`);
  if(res.data.code === 1000){
    let idx=blogs.value.findIndex(item=>item.id===id)
    console.log(idx);
    blogs.value.splice(idx,1)
  }else{
    alert(res.data.msg)
  }
  

}





</script>

<template>
  <div>
    <div class="addOrEdit">
      <form v-show="isSeen" >
        <table>
          <tbody>
            <tr>
              <td><table>标题</table></td>
              <td><input type="text"  v-model="blog.title"></td>
            </tr>
            <tr>
              <td><table>作者</table></td>
              <td><input type="text" v-model="blog.author"></td>
            </tr>
            <tr>
              <td><table>内容</table></td>
              <td><input type="text" v-model="blog.conternt"></td>
            </tr>
            <tr>
              <td><input type="button" value="保存" @click="butSave()"></td>
              <td><input type="button" value="取消" @click="butCancel()"></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div class="operation">
      <input type="text"  placeholder="请输入关键字" v-model="keyword">
      <input type="button" value="新增" @click="butAdd()">
      <input type="button" value="查找" @click="butFind()">
    </div>
    <div class="list">
      <table>
          <thead>
            <tr>
            <th>id</th>
            <th>标题</th>
            <th>作者</th>
            <th>内容</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="blog in  blogs" :key="blog.id">
              <td>{{blog.id}}</td>
              <td>{{blog.title}}</td>
              <td>{{blog.author}}</td>
              <td>{{blog.conternt}}</td>
              <td>
                <input type="button" value="编辑" @click="butEdit(blog.id)">
                <input type="button" value="删除" @click="butDel(blog.id)">
              </td>
            </tr>
          </tbody>
  
      </table>
    </div>
  </div>
 
</template>

<style scoped>
 
</style>
